import 'package:flutter/material.dart';
import 'package:puppy_store/main.dart';
import 'package:puppy_store/pages/home/home_page.dart';
import 'package:puppy_store/pages/mine/mine_page.dart';
import 'package:puppy_store/pages/category/category_page.dart';
import 'package:puppy_store/pages/cart/cart_page.dart';
import "package:puppy_store/pages/root_page/frames_animation.dart";
import 'package:puppy_store/utils/common_utils.dart';

class RootPage extends StatefulWidget {
  const RootPage({super.key});

  @override
  State<RootPage> createState() => _RootPageState();
}

// 解决切换底部导航Items时, 图标闪动的问题
// 问题: 底部导航初次切换item时, 图标会闪一下, 再次切换就正常了
// 原因:
// Image组件在加载新图时, 默认会先将旧图清空,在新图展示前,会有一段空白内容
// 如果加载新图有延迟, 则空白内容就会明显展示出来, 此时就会看到图标闪动的画面
// 解决:
// gaplessPlayback 属性, 控制Image组件在加载新图时是否清空旧图
//  false: 加载新图时,先清空旧图, 会有一段空白内容
//  true: 加载新图时, 不清空旧图, 知道新图展示出来为止

class _RootPageState extends State<RootPage> {
  // 页面类型
  List<Widget> pages = [HomePage(), CategoryPage(), CartPage(), MinePage()];
  // 当前页的索引
  int pageIndex = 0;

  // 存放帧动画组件的Key
  List<GlobalKey<FramesAnimationState>> framesKeys = [
    GlobalKey<FramesAnimationState>(debugLabel: "home_key"),
    GlobalKey<FramesAnimationState>(debugLabel: "category_key"),
    GlobalKey<FramesAnimationState>(debugLabel: "cart_key"),
    GlobalKey<FramesAnimationState>(debugLabel: "mine_key"),
  ];

  // 记录当前选中Item的索引 默认首页是上一次选中的Item
  int _lastIndex = 0;

  // 加载首页帧动画图片
  List<Image> _loadHomeFrames() {
    List<Image> images = [];

    for (int i = 0; i < 24; i++) {
      images.add(
        Image.asset(
          "assets/home_frames/home_frame_$i.png",
          gaplessPlayback: true,
          width: 20,
          height: 20,
        ),
      );
    }

    return images;
  }

  List<Image> _loadCartFrames() {
    List<Image> images = [];

    for (int i = 0; i < 24; i++) {
      images.add(
        Image.asset(
          "assets/cart_frames/cart_frame_$i.png",
          gaplessPlayback: true,
          width: 20,
          height: 20,
        ),
      );
    }

    return images;
  }

  List<Image> _loadMineFrames() {
    List<Image> images = [];

    for (int i = 0; i < 24; i++) {
      images.add(
        Image.asset(
          "assets/mine_frames/mine_frame_$i.png",
          gaplessPlayback: true,
          width: 20,
          height: 20,
        ),
      );
    }

    return images;
  }

  List<Image> _loadCategoryFrames() {
    List<Image> images = [];

    for (int i = 0; i < 24; i++) {
      images.add(
        Image.asset(
          "assets/category_frames/category_frame_$i.png",
          gaplessPlayback: true,
          width: 20,
          height: 20,
        ),
      );
    }

    return images;
  }

  // pageView 控制器
  late PageController? _pageController;

  @override
  void initState() {
    // 订阅回到首页的事件 event就是 GoToHomeEvent的实例对象
    // EventBus使用 步骤3: 订阅事件
    eventBus.on<GoToHomeEvent>().listen((event) {
      // 解决重复点击一个Tab时,动画不播放的现象
      if (_lastIndex == 0) {
        return;
      }
      // 1. 切换本次选中的Item的帧动画
      framesKeys[0].currentState?.startAnimation();
      // 2. 重置上次被选中的Item的帧动画
      framesKeys[_lastIndex].currentState?.resetAnimation();
      // 3. 记录本次被选中的item
      _lastIndex = 0;

      // 切换到哪个页面
      _pageController!.jumpToPage(0);

      setState(() {
        pageIndex = 0;
      });
    });

    _pageController = PageController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: Text("Puppy Store"),
      //   centerTitle: true,
      //   // 去掉阴影
      //   elevation: 0,
      //   // 去掉背景色
      //   backgroundColor: Colors.amber,
      // ),
      // body: pages[pageIndex],
      body: PageView(
        // 禁止左右滑动
        physics: NeverScrollableScrollPhysics(),
        controller: _pageController,
        children: pages,
      ),
      // 底部导航
      bottomNavigationBar: BottomNavigationBar(
        // 设置选中后Tab的高亮
        currentIndex: pageIndex,
        //监听底部导航点击事件, index表示点击的是第几个按钮
        onTap: (int index) {
          // 解决重复点击一个Tab时,动画不播放的现象
          if (_lastIndex == index) {
            return;
          }
          // 1. 切换本次选中的Item的帧动画
          framesKeys[index].currentState?.startAnimation();
          // 2. 重置上次被选中的Item的帧动画
          framesKeys[_lastIndex].currentState?.resetAnimation();
          // 3. 记录本次被选中的item
          _lastIndex = index;

          // 切换到哪个页面
          _pageController!.jumpToPage(index);

          setState(() {
            pageIndex = index;
          });
        },
        // 设置选中后Tab的颜色
        selectedItemColor: Colors.cyan,
        // 设置未选中Tab的颜色
        unselectedItemColor: Colors.grey,
        // 设置选中后Tab的背景色
        selectedIconTheme: IconThemeData(color: Colors.cyan),
        // 设置未选中Tab的背景色
        unselectedIconTheme: IconThemeData(color: Colors.grey),
        // 设置选中后Tab的文字样式
        selectedLabelStyle: TextStyle(fontSize: 16),
        // flutter 底部的button一旦超过3个,它的type就变成shifting, 而且是透明的
        // 所以这里我们需要设置成fixed, 这样就不会出现透明的效果了
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
            // activeIcon: Image.asset(
            //   "assets/home_sel.png",
            //   gaplessPlayback: true,
            // ),
            // icon: Image.asset("assets/home_nor.png", gaplessPlayback: true),
            // 自定义帧动画组件-实现帧动画效果
            // 测试 实现7秒钟内播放7个色块的帧动画
            // 实现逻辑,动画每刷新一帧,就从7个色块中取出一个色块展示
            // 实现步骤
            // 1. 准备帧动画内容
            // 2. 获取帧动画索引
            // 3. 读取并展示当前帧
            icon: FramesAnimation(
              key: framesKeys[0],
              initIndex: 0,
              images: _loadHomeFrames(),
            ),
            label: "首页",
          ),
          BottomNavigationBarItem(
            // activeIcon: Image.asset(
            //   "assets/category_sel.png",
            //   gaplessPlayback: true,
            // ),
            // icon: Image.asset("assets/category_nor.png", gaplessPlayback: true),
            icon: FramesAnimation(
              key: framesKeys[1],
              initIndex: 1,
              images: _loadCategoryFrames(),
            ),
            label: "分类",
          ),
          BottomNavigationBarItem(
            // activeIcon: Image.asset(
            //   "assets/cart_sel.png",
            //   gaplessPlayback: true,
            // ),
            // icon: Image.asset("assets/cart_nor.png", gaplessPlayback: true),
            icon: FramesAnimation(
              key: framesKeys[2],
              initIndex: 2,
              images: _loadCartFrames(),
            ),
            label: "购物车",
          ),
          BottomNavigationBarItem(
            // activeIcon: Image.asset(
            //   "assets/mine_sel.png",
            //   gaplessPlayback: true,
            // ),
            // icon: Image.asset("assets/mine_nor.png", gaplessPlayback: true),
            icon: FramesAnimation(
              key: framesKeys[3],
              initIndex: 3,
              images: _loadMineFrames(),
            ),
            label: "我的",
          ),
        ],
      ),
    );
  }
}
